import React from 'react';
import ReactDOM from 'react-dom';
import { createHashHistory } from 'History';
import { Router, useRouterHistory, Route, IndexRedirect } from 'react-router';
import { syncHistoryWithStore, RouterStore } from 'mobx-react-router';
import { Provider } from 'mobx-react';
import routes from "./routes/single";
import routes4Index from "./routes/index";

import stores4Index from "./stores/index";
import stores from "./stores/single";
import "./styles/index.css";

const browserHistory = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});

const routing = new RouterStore();
const history = syncHistoryWithStore(browserHistory, routing);
const allStores = {
  routing,
  ...stores4Index,
  ...stores,
};
const allRoutes = [
  routes,
  routes4Index
];

const Root = () => (
  <Provider {...allStores}>
    <Router history={history} routes={allRoutes} />
  </Provider>
);

ReactDOM.render(<Root />, document.getElementById('container'));
